@model CustomerMembershipModel
@using Nop.Core.Infrastructure;
@using SpotsHub.Gateway.Models.Customer;
@{
    Layout = "~/Views/Shared/_MyHUB.cshtml";

    //title
    ViewBag.Title = T("Account.CustomerSettings");

    var gridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Customers.CustomerSettings>().GridPageSize;
    if (gridPageSize <= 0)
    {
        gridPageSize = 10;
    }

    //Model.CurrentMembershipStatus = "Business Club";
    //Model.MembershipDays = 135;
    //Model.MembershipExipry = DateTime.Now.AddDays(135);
    //Model.MembershipOptions.Add(new SelectListItem()
    //{
    //    Value = "1",
    //    Text = "One month membership: valid for 30 days. ($4.99)"
    //});
    //Model.MembershipOptions.Add(new SelectListItem()
    //{
    //    Value = "2",
    //    Text = "One year membership: valid for 365 days. ($19.99)"
    //});
}

@section left
{
    @Html.Partial("MyAccountNavigation", Model.NavigationModel, new ViewDataDictionary())
}

<div class="page-membership customer-info-page">

    <h1>@T("Account.MyAccount") - @T("Account.Membership")</h1>

    <div class="my-hub-body">
        @Html.Action("RenderMessages", "Common")
        <div class="membership-wrapper">
            <div class="membership-status membership-slide">
                <div class="section-wrapper">
                    @Html.Partial("MembershipStatus", Model)
                </div>           
            </div>
            <div class="membership-paymentmethod membership-slide">
                <div class="section-wrapper">
                    <div id="paymentmethod-pane"></div>
                    <input type="button" class="btn btn-primary payment-method-cancel" value="Cancel" />
                    <input type="button" class="btn btn-primary payment-method-next" value="Next" />
                </div>
            </div>
            <div class="membership-payment membership-slide">
                <div class="section-wrapper">
                    <h2>This is the payment area (to be integrated later)</h2>
                    <p>Payment description and diclaimer to be added before and after the payment form. Clicking the process below will not process the membership order</p>
                    <div id="creditcards"></div>
                    <div id="payment-pane"></div>
                    <input type="button" class="btn btn-primary payment-cancel" value="Cancel" />
                    <input type="button" class="btn btn-primary payment-process" value="Process" />
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $(".purchase-membership").live("click", function () {
            if ($("input[name=SelectedMembershipOptionId]:checked").val() != null) {
                slideAnimate($(".membership-status"), $(".membership-paymentmethod"), "left");
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: '@Url.RouteUrl("CustomerMembershipPaymentMethod")',
                    data: $('#membership-product-form').serialize(),
                    success: function (data) {
                        if (data.success) {
                            $('#paymentmethod-pane').html(data.html);
                        }
                    }
                });
            }
        });
        $(".membership-paymentmethod .payment-method-next").live("click", function () {
            var d = {};
            if ($('#MembershipPaymentMethod').length) {
                d = $('#MembershipPaymentMethod').serialize();
            }
            else
            {
                d = {
                    freeMembershipOffer: 1
                }
            }
            $.ajax({
                cache: false,
                type: "POST",
                url: '@Url.RouteUrl("CustomerMembershipSavePaymentMethod")',
                data: d,
                success: function (data) {
                    $('#payment-pane').html(data.html);
                    slideAnimate($(".membership-paymentmethod"), $(".membership-payment"), "left");

                    $("input[value='Select']").click(function () {
                        var id = $(this).attr("data-card");
                        $("#CreditCardId").val(id);
                        var selectValue = $("input[name='SelectedMembershipOptionId']:checked").val();
                        $("#SelectedVariantId").val(selectValue);
                        
                    });
                }
            });
        });
        $(".membership-paymentmethod .payment-method-cancel").live("click", function () {
            slideAnimate($(".membership-paymentmethod"), $(".membership-status"), "right");
        });
        $(".membership-payment .purchase-membership-cancel").live("click", function () {
            slideAnimate($(".membership-payment"), $(".membership-select"), "right");
        });
        $(".membership-payment .payment-process").live("click", function () {
            $.ajax({
                cache: false,
                type: "POST",
                url: '@Url.RouteUrl("CustomerMembershipSavePaymentInfo")',
                data: $('#paymentinfo-form').serialize(),
                success: function (data) {
                    $('membership-wrapper membership-status').html(data.data);
                }
            });            
            slideAnimate($(".membership-payment"), $(".membership-status"), "right");
        });

        $(".membership-payment .payment-cancel").live("click", function () {
            slideAnimate($(".membership-payment"), $(".membership-status"), "right");
        });


    });
</script>